new Vue({
    el:"#app",
    data:{
        topic:{
            id:"",
            title:"",
            content:"",
            photo:"",
            topicMsg:"",
            userName:"",
            userImg:"",
            commentNum:"",
            likeNum:"",
            collectNum:"",
            created:"",
            visitNum:""
        },
        loginUserId:"0",
        username:"",
        headimg:"",
        userType:"",      // 用户类型 0：普通用户 1：付费用户 2：管理员
        commentContent:"",     // 评论内容
        commentList:[],   // 评论列表
        total:"",         // 总页数
        pageNum:"1",      // 当前页数,默认为1
        topicList:[],          // 帖子集合
        likeStatus:"",         // 点赞状态
        collectStatus:"",      // 收藏状态
        topicId:""
    },
    methods:{
        //获取帖子详情
        getTopicDetail:function () {
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            // 这里直接去拿存在redis中的topicId
            axios.get('/consumer/topic/getById')
                .then(function (response) {
                    //把返回的总页数赋值给这里的总页数, 总数量/10 = 总页数
                    _this.topic = response.data.data;
                    // 获取markdown的文本内容
                    _this.showTopicContent(_this.topic.content);
                    // 获取点赞和收藏状态
                    _this.getAllStatusByTopicId(response.data.data.id);
                    // 获取评论列表
                    _this.getCommentListByTopicId(response.data.data.id);
                    // 获取总页数
                    _this.getCommentTotalCount(response.data.data.id);
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        showTopicContent:function (content) {
            // alert(content);
            var text = content;
            var articles_all = "";
            //帖子内容
            var listArticle_fcontent  = text;

            articles_all = articles_all +
                '<div class="row">' +
                '   <div class="col-md-12">' +
                '       <div id="artice-doc-content">' +
                '           <!-- 帖子内容 -->' +
                '           <textarea style="display:none;">'+listArticle_fcontent+'</textarea>' +
                '       </div>' +
                '   </div>' +
                '</div>'

            $("#resultContent").html(articles_all);

            /*把MD语法文档，转换为HTML语法 - js*/
            var testEditor;
            $(function () {
                testEditor = editormd.markdownToHTML("artice-doc-content", {//注意：这里是上面DIV的id
                    htmlDecode: "style,script,iframe",
                    emoji: true,
                    taskList: true,
                    tex: true, // 默认不解析
                    flowChart: true, // 默认不解析
                    sequenceDiagram: true, // 默认不解析
                    codeFold: true,
                });
            });
        },
        verifyToken:function () {
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            axios.get('/consumer/token/verifyToken')
                .then(function (response) {
                    if (response.data.data == "TOKEN_EXPIRED") {
                        alert("token已失效, 请重新登录！");
                        // token失效, 需要重新登陆
                        window.location.href = "login.html";
                    }
                    // 普通用户无法查看详情内容, 只有充值用户和管理员才能查看详情内容
                    if (response.data.data.split("-")[2] == 0) {
                        alert("非会员无法查看更多内容, 立即充值成为会员吧!")
                        // 普通用户无法查看内容, 需要跳转到充值页面
                        window.location.href = "voucherCenter.html";
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        getAllStatusByTopicId:function (topicId) {
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            axios.get('/consumer/topic/getAllStatusByTopicId', {
                params: {
                    topicId: Number(topicId)
                }
            })
                .then(function (response) {
                    _this.likeStatus = response.data.data.likeStatus;
                    _this.collectStatus = response.data.data.collectStatus;
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        likeTopicById:function (topicId, status) {
            if (status == 1) {
                alert("点赞成功！~");
            } else {
                alert("已取消点赞！~");
            }
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            //axios的post方式需要一个formData来传参
            var formData = new FormData();
            formData.append('topicId', Number(topicId));
            formData.append('status', Number(status));
            var config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            axios.post('/consumer/like/likeTopic',formData,config)
                .then(
                    function (response) {
                        // 刷新当前页
                        _this.getTopicDetail();
                    }
                )
                .catch(function (error) {
                    console.log(error);
                })
        },
        collectTopicById:function (topicId, collectStatus) {
            if (collectStatus == 1) {
                alert("收藏成功！~");
            } else {
                alert("已取消收藏！~");
            }
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            //axios的post方式需要一个formData来传参
            var formData = new FormData();
            formData.append('topicId', Number(topicId));
            formData.append('collectStatus', Number(collectStatus));
            var config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            axios.post('/consumer/collect/collectTopic',formData,config)
                .then(
                    function (response) {
                        // 刷新当前页
                        _this.getTopicDetail();
                    }
                )
                .catch(function (error) {
                    console.log(error);
                })
        },
        getLoginUserById:function () {
            var _this = this;
            axios.get('/consumer/user/getLoginUserById')
                .then(function (response) {
                    //把返回的user对象的id赋值给这里的id
                    if (response.data != null) {
                        _this.loginUserId = response.data.data.id;
                        _this.username = response.data.data.username;
                        _this.headimg = response.data.data.headimg;
                        _this.userType =  response.data.data.userType;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        // 总评论页数
        getCommentTotalCount:function (topicId) {
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            axios.get('/consumer/comment/getCommentListByTopicId', {
                params: {
                    topicId: Number(topicId),
                    pageNum:_this.pageNum
                }
            })
                .then(function (response) {
                    //把返回的总页数赋值给这里的总页数, 总数量/10 = 总页数
                    _this.total = Math.ceil(response.data.data.total / 5);
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        // 获取当前帖子下的所有评论内容
        getCommentListByTopicId:function (topicId) {
            var _this = this;
            axios.get('/consumer/comment/getCommentListByTopicId', {
                params: {
                    topicId: Number(topicId),
                    pageNum:_this.pageNum
                }
            })
                .then(function (response) {
                    // 返回的集合直接赋值给评论集合
                    if (response.data != null) {
                        _this.commentList = response.data.data.data;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        //下一页
        nextPage:function () {
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            //判断当前页面是否为最后一页
            if (_this.pageNum == _this.total) {
                //页面跳转
                alert("已经是最后一页了噢！~");
            } else {
                //页数 + 1
                _this.pageNum = Number(_this.pageNum) + 1;
                //重新执行查询分页方法
                _this.getCommentListByTopicId(_this.topic.id);
            }
        },
        //上一页
        prePage:function () {
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            //判断当前是否为第一页
            if (_this.pageNum == 1){
                //如果是第一页的话就不用动,返回第一页
                alert("已经是第一页了噢！~");
            } else {
                //如果不是第一页的话就直接pageNum - 1
                _this.pageNum = Number(_this.pageNum) - 1;
                //重新执行查询分页方法
                _this.getCommentListByTopicId(_this.topic.id);
            }
        },
        // 评论topicId
        commentTopic:function (topicId) {
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            var text = document.getElementById("commentContent").value;
            //axios的post方式需要一个formData来传参
            var formData = new FormData();
            formData.append('topicId', Number(topicId));
            formData.append('content', text);
            var config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            axios.post('/consumer/comment/commentTopic',formData,config)
                .then(
                    function (response) {
                        // 刷新当前页
                        _this.getTopicDetail();
                        window.location.reload();
                    }
                )
                .catch(function (error) {
                    console.log(error);
                })
        },
        setSelfUserId:function (userId) {
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            //axios的post方式需要一个formData来传参
            var formData = new FormData();
            formData.append('userId', userId);
            var config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            axios.post('/consumer/user/setSelfUserId',formData,config)
                .then(function (response) {
                    if (userId == _this.loginUserId) {
                        // 如果id是登录的用户id的话就直接跳转到自己的页面, 否则跳转到其他人的页面
                        window.location.href = "self.html";
                    } else {
                        window.location.href = "other.html";
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        // 登出流程
        loginOut:function () {
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            axios.get('/consumer/token/loginOut')
                .then(function (response) {
                    if (response.data.code == 1) {
                        alert("账号已登出！");
                        // 刷新当前页面
                        window.location.reload();
                    }
                })
                .catch(function (error) {
                    console.log(error);
                })
        }
    },
    created:function () {

        // 创建的时候先校验token是否合法
        this.verifyToken();

        //创建的时候先执行判断是否登录的方法
        this.getLoginUserById();

        // 获取帖子的详情信息
        this.getTopicDetail();

    }
});